<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增商品规格')" />
</head>
<body class="white-bg">

<div id="app">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-specification-add">
			<div class="form-group">
				<label class="col-sm-3 control-label"><span style="color:red;">*</span>规格名称：</label>
				<div class="col-sm-8">
					<input  name="specName" data-role="specName" class="form-control" type="text" required>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">规格备注：</label>
				<div class="col-sm-8">
					<input  id="specMemo" data-role="specMemo" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">显示类型：</label>
				<div class="col-sm-8" data-role="specType">
					<label class="radio-inline">
						<input type="radio" name="specType" value="0" checked="checked">文字
					</label>
					<label class="radio-inline">
						<input type="radio" name="specType" value="1">图片
					</label>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">显示方式：</label>
				<div class="col-sm-8" data-role="specShowType">
					<label class="radio-inline">
						<input type="radio" checked="checked" name="specShowType" value="0">平铺显示
					</label>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"></label>
				<div class="col-sm-9">
					<table class="table table-bordered" data-mobile-responsive="true" data-role="addStyle">
						<thead>
						<tr>
							<th>规格值名称</th>
							<th>规格值别名</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody>
						<!--<tr>-->
                            <!--<td><input name="name" class="form-control" type="text" ></td>-->
							<!--<td><input name="alias" class="form-control" type="text" ></td>-->
							<!--<td style="width:160px">-->
								<!--<button class="btn " type="button" name="showSearch" >-->
									<!--<i class="glyphicon glyphicon-arrow-up" style="color: #1ab394;"></i>-->
								<!--</button>-->
								<!--<button class="btn" type="button" name="showSearch">-->
									<!--<i class="glyphicon glyphicon-arrow-down" style="color: #1ab394;"></i>-->
								<!--</button>-->
								<!--<button class="btn" type="button" name="showSearch" >-->
									<!--<i class="glyphicon glyphicon glyphicon-trash" style="color: #d9534f;"></i>-->
								<!--</button>-->
							<!--</td>-->
						<!--</tr>-->
						</tbody>
						<tfoot>
						<tr>
							<td colspan="3">
								<div class="btn-group-sm" data-role="add-group" style="text-align: center;">
									<a class="btn btn-success">
										<i class="fa fa-plus"></i> 添加规格值
									</a>
								</div>
							</td>
						</tr>

						</tfoot>
					</table>
				</div>
			</div>

		</form>
	</div>
</div>

<div th:include="include::footer"></div>
<script type="text/javascript">

	$(function() {
		// 删除逻辑
		$(document).on('click', '[data-role="trDel"]', function() {
			$(this).closest('tr').remove();
		})

		// 上下移动
		$(document).on('click', '[data-role="trUp"]', function() {
			var _this = $(this).closest('tr');
			if(_this.prev()) {
				_this.prev().before(_this);
			}

		})
		$(document).on('click', '[data-role="trDown"]', function() {
			var _this = $(this).closest('tr');
			if(_this.next()) {
				_this.next().after(_this);
			}
		})

		$('[data-role="add-group"]').on('click',function () {
			var html = '<tr>\
                        <td>\
                            <input type="text"  value="">\
                        </td>\
                        <td>\
                            <input type="text" value="">\
                        </td>\
                        <td style="width:160px">\
							<button class="btn " type="button" data-role="trUp" >\
							<i class="glyphicon glyphicon-arrow-up" style="color: #1ab394;"></i>\
							</button>\
							<button class="btn" type="button" data-role="trDown">\
							<i class="glyphicon glyphicon-arrow-down" style="color: #1ab394;"></i>\
							</button>\
							<button class="btn" type="button" data-role="trDel" >\
							<i class="glyphicon glyphicon glyphicon-trash" style="color: #d9534f;"></i>\
							</button>\
						</td>\
                    </tr>';
			$('[data-role="addStyle"] tbody').append(html);
		});


	});


	var prefix = ctx + "goods/specification";

	$("#form-specification-add").validate();


	function submitHandler() {
		if ($.validate.form()) {
			var specId = $.trim($('[data-role="specId"]').val());
			var specName = $.trim($('[data-role="specName"]').val());

			var specMemo = $.trim($('[data-role="specMemo"]').val());
			var specType = $('[data-role="specType"] input:checked').index();
			var specShowType = $('[data-role="specShowType"] input:checked').index();

			var specValuesJson = [];
			var apecTr = $('[data-role="addStyle"] tbody tr');
			for(var i = 0,len = apecTr.length;i < len;i++) {
				var obj = {};
				obj.specValue = apecTr.eq(i).find('input').eq(0).val();
				obj.alias = apecTr.eq(i).find('input').eq(1).val();
				obj.orderNum = i;
				obj.specImage = '';
				specValuesJson.push(obj);
			}
			if (specValuesJson.length <= 0) {
				$.modal.msgWarning("规格值为空");
			} else {
				var data = {
					specId:specId,
					specName: specName,
					specMemo: specMemo,
					specType: specType,
					specShowType: specShowType,
					specValuesJson: JSON.stringify(specValuesJson)
				};
				$.operate.save(prefix + "/add", data);
			}

		}
	}


</script>
</body>
</html>
